<template>
  <div class="whole">
    <div class="header">
      <a href="http://www.suning.com" class="logo">
        <div class="header-logo"></div>
      </a>
      <div class="logo-right">
        依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号绑定验证！<a>《隐私政策》</a>已上线，将更有利于保护您的个人隐私。
      </div>
      <a href="#" class="login">我想对“登录”提意见</a>
    </div>

    <div class="content">
      <ValidationObserver v-slot="{ handleSubmit }">
        <div class="content-center" @submit.prevent="handleSubmit">
          <div class="center-header">
            <a href="#" class="Ewm"><span>扫码登陆</span></a>
            <a href="#" class="Account"><span>账户登陆</span></a>
          </div>

          <div class="content-note">
            <div class="content-note-two">
              <div class="phone">
                <ValidationProvider
                  class="input-text clearFix"
                  name="phone"
                  rules="phone|phoneRequired"
                  mode="lazy"
                  tag="div"
                  v-slot="{ errors }"
                >
                  <div class="input-box">
                    <input
                      type="text"
                      placeholder="用户名/手机/邮箱"
                      v-model="user.phone"
                    />
                    <div class="err-msg">{{ errors[0] }}</div>
                    <i></i>
                  </div>
                </ValidationProvider>
              </div>

              <ValidationProvider
                class="input-text clearFix"
                name="password"
                rules="password|passwordRequired"
                mode="lazy"
                tag="div"
                v-slot="{ errors }"
              >
                <div class="pass">
                  <div class="pass-box">
                    <input
                      type="text"
                      placeholder="请输入密码"
                      v-model="user.password"
                    />
                    <div class="err-msg">{{ errors[0] }}</div>
                    <i></i>
                  </div>
                </div>
              </ValidationProvider>

              <div class="yard">
                <a class="CAPTCHA">
                  <i></i>
                  短信验证码登录
                </a>
                <a class="yard-pass">忘记密码?</a>
              </div>
              <a href="#" class="yard-login" @click="submit">登 录</a>
            </div>
          </div>

          <div class="surprised">
            <a href="/register"
              ><div class="surprised-two">注册有惊喜 ></div></a
            >
          </div>

          <div class="content-last">
            <span class="title">使用以下账号登陆</span>

            <div class="way">
              <a href="#" class="QQ">
                <i></i>
                QQ
              </a>
              <a href="#" class="VX">
                <i></i>
                微信
              </a>
              <a href="#" class="YeePag">
                <i></i>
                微信
              </a>
              <a href="#" class="MicroBlog">
                <i></i>
                微博
              </a>
            </div>
          </div>
        </div>
      </ValidationObserver>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { ValidationObserver, ValidationProvider } from 'vee-validate'
import '@/utils/regs'
// import { reqLogin } from '@/api/user'

export default {
  name: 'ZRegister',
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      user: {
        phone: '13412345687',
        password: '1234567'
      }
    }
  },
  methods: {
    ...mapActions('user', ['login']),
    async submit() {
      // 触发vuex的action函数
      // action函数返回值是promise对象
      await this.login(this.user)
      this.$router.push(this.$route.query.redirect || '/')
    }
  }
}
</script>

<style scoped>
.whole {
  width: 1905px;
  height: 870px;
}
.header {
  width: 970px;
  height: 100px;
  color: #333;
  margin: 0px 467px;
}
.header-logo {
  float: left;
  width: 189px;
  height: 100px;
  background: url(./images/header190-60.png) center no-repeat;
}
.header .logo-right {
  border: 1px solid #fecd66;
  float: left;
  width: 744px;
  /* height:26px; */
  background: #fefff1;
  padding: 4px 6px;
  line-height: 16px;
  color: #333;
}
.header .logo-right a {
  color: #f60;
}
.login {
  width: 148px;
  height: 18px;
  margin: 8px 0px 0px;
  float: right;
  text-decoration: none;
}
.login:hover {
  color: red;
}
.content {
  min-width: 970px;
  height: 570px;
  background: url(./images/166244647554672376.jpg) center no-repeat;
}
.content-center {
  float: right;
  position: relative;
  width: 360px;
  height: 432px;
  margin-top: 50px;
  background: #fff;
  box-shadow: 0 0 2px #ececec;
  margin-right: 440px;
}

/* .two-login-1 {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  text-decoration: none;
  text-align: center;
}
.two-login-1 span {
  display: block;
  border-right: 1px solid #eee;
  margin-top: 15px;
  font-size:16px;
} 
 .two-login-1 span:hover {
  color: #f60;
}  */
/* .two-login-2 {
  font-size: 16px;
  margin-left: 40%;
  margin-top: 40px;
}
.two-login-2 span {
  display: block;
  border-right: 1px solid #eee;
  margin-top: 15px;
}
.two-login-2 span:hover {
  color: #f60;
}
.phone {
  margin: 25px;
  padding: 5px;
  /* color:#ccc; */
/* } */
/* 
.phone-text {
  width: 293px;
  height: 33px;
  font-size: 14px;
  color: #ccc;
}
.pass {
  margin-left: 25px;
  margin-bottom: 20px;
  width: 300px;
  height: 33px;
  font-size: 14px;
} */

.center-header {
  height: 50px;
  line-height: 20px;
  font-size: 16px;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}

.center-header .Ewm {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  text-decoration: none;
  text-align: center;
}
.center-header .Ewm:hover {
  color: #f60;
}
.center-header .Ewm span {
  display: block;
  border-right: 1px solid #eee;
  margin-top: 15px;
}
.center-header .Account {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  text-decoration: none;
  text-align: center;
}
.center-header .Account:hover {
  color: #f60;
}
.center-header .Account span {
  display: block;
  border-right: 1px solid #eee;
  margin-top: 15px;
}
.content-note-two {
  padding: 0 24px;
  width: 360px;
  height: 241px;
}
.phone {
  position: relative;
  width: 312px;
  height: 38px;
}
.input-box {
  position: relative;
  border: 1px solid #ddd;
  color: #999;
  padding: 0 32px 0 36px;
  height: 36px;
  margin-top: 40px;
  overflow: hidden;
}
.input-box input {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 36px;
  padding: 0 32px 0 36px;
  border: 0;
  font-size: 14px;
  margin-left: -36px;
}
.input-box i {
  background: url(./images/login.png) -123px -67px no-repeat;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 0;
}
.pass {
  position: relative;
  width: 312px;
  height: 38px;
}
.pass-box {
  position: relative;
  border: 1px solid #ddd;
  color: #999;
  padding: 0 32px 0 36px;
  height: 36px;
  margin: 20px 0px;
  overflow: hidden;
}
.pass-box input {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 36px;
  padding: 0 32px 0 36px;
  border: 0;
  font-size: 14px;
  margin-left: -36px;
}
.pass-box i {
  background: url(./images/login.png) 0 -108px no-repeat;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 0;
}
.yard {
  width: 312px;
  height: 45px;
  line-height: 35px;
  /* padding:10px; */
  margin-top: 30px;
}
.CAPTCHA {
  float: left;
  text-decoration: none;
  width: 102px;
  height: 35px;
  cursor: pointer;
}
.CAPTCHA:hover {
  color: #f60;
}
.yard .CAPTCHA i {
  background: url(./images/login.png) -21px -149px no-repeat;
  display: inline-block;
  width: 13px;
  height: 16px;
  margin-right: -1px;
  vertical-align: -3px;
}
.yard-pass {
  width: 60px;
  height: 35px;
  float: right;
  cursor: pointer;
}
.yard-pass:hover {
  color: #f60;
}
.yard-login {
  display: block;
  width: 310px;
  line-height: 40px;
  margin: 0 auto;
  background: #f60;
  border-radius: 2px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin: 0px 1px 0px 1px;
}

/* .note {
  width: 312px;
  height: 45px;
  color: #ccc;
  padding-top: 10px;
}
.note .note-one i {
  float: left;
  display: inline-block;
  width: 13px;
  height: 16px;
  margin-right: 5px;
  margin-left: 24px;
  vertical-align: -3px;
  background: url(./images/login.png) -21px -149px no-repeat;
}
.note-short {
  float: left;
  text-decoration: none;
}
.note-short:hover {
  color: #f60;
}
.forget {
  margin-right: 30px;
  float: right;
}
.forget:hover {
  color: #f60;
}
.last {
  display: block;
  width: 310px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border-radius: 2px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: #f60;
}
.last-login {
  font: 20px;
  cursor: pointer;
} */
.surprised {
  text-align: center;
  margin: 0px 0 35px;
}
.surprised-two {
  /* text-decoration:none; */
  font-size: 12px;
  color: #f60;
}
.surprised-two:hover {
  color: #f60;
}
.content-last {
  position: relative;
  width: 310px;
  margin: 0 auto;
  border-top: 1px solid #ddd;
  padding: 19px 0 17px;
}
.title {
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -64px;
  color: #999;
  width: 128px;
  background: #fff;
  text-align: center;
}
.content-last .way i {
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.QQ {
  padding-left: 0;
}
.way a {
  float: left;
  padding: 0 7px;
  border-right: 1px solid #dedcd5;
  line-height: 16px;
}
.QQ i {
  background: url(./images/login.png) -140px -108px no-repeat;
}
.QQ:hover {
  color: #f60;
}
.VX i {
  background: url(./images/login.png) -90px -27px no-repeat;
}
.VX:hover {
  color: #f60;
}
.YeePag i {
  background: url(./images/login.png) -119px -108px no-repeat;
}
.YeePag:hover {
  color: #f60;
}
.MicroBlog i {
  background: url(./images/login.png) 0 -149px no-repeat;
}
.MicroBlog:hover {
  color: #f60;
}
.err-msg {
  color: red;
}
</style>
